<template>
  <div class="usermanagementent-wrap">
    <el-table
      :data="
        userData.filter(
          (data) =>
            !search ||
            data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="Name" prop="name"> </el-table-column>
      <el-table-column label="Phone" prop="phone"> </el-table-column>
      <el-table-column label="City" prop="city"> </el-table-column>
      <el-table-column label="State" prop="state"> </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-button type="primary" @click="user_add">新增</el-button>
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="state">
            <el-input v-model="ruleForm.state"></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-input v-model="ruleForm.city"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editPopupOver(ruleForm)"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "../../../utils/request";
import "../../../utils/api";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      list: [],
      dialogTitle: "",
      dialogVisible: false,
      isEdit: false,
      ruleForm: {
        id: "",
        name: "",
        phone: null,
        state: "",
        city: "",
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        state: [{ required: true, message: "请输入地址", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
      },
      search: "",
    };
  },
  computed: {
    ...mapState(["userData"]),
  },
  created() {
    if (this.userData.length <= 0) {
      this.$store.dispatch("getUserData");
    }
  },
  mounted() {},
  methods: {
    ...mapMutations(["userManagementRdit", "userManagementAdd"]),
    ...mapActions([]),
    // 点击删除
    handleDelete(index, row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$store.commit("userManagementDeleteitem", row.id);
          // console.log(this.list);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击编辑
    handleEdit(index, row) {
      // console.log(row);
      this.isEdit = true;
      if (this.isEdit) {
        this.ruleForm.id = row.id;
        this.ruleForm.name = row.name;
        this.ruleForm.phone = row.phone;
        this.ruleForm.city = row.city;
        this.ruleForm.state = row.state;

        this.dialogTitle = "编辑";
        this.dialogVisible = !this.dialogVisible;
      }
    },
    // 点击添加按钮
    user_add() {
      this.isEdit = false;
      this.ruleForm.id = "";
      this.ruleForm.name = "";
      this.ruleForm.phone = "";
      this.ruleForm.city = "";
      this.ruleForm.state = "";
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击编辑保存按钮
    editPopupOver(ruleForm) {
      // 如果是 编辑
      if (this.isEdit) {
        this.userManagementRdit(ruleForm);
      } else {
        // 如果 isEdit 为假 那就是添加
        this.userManagementAdd(ruleForm);
      }

      this.dialogVisible = false;

      // console.log(ruleForm);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.usermanagementent-wrap {
  width: 100%;
}
.margin-top {
  margin-bottom: 10px;
  width: 100%;
  .el-descriptions__table {
    width: 100%;
    tbody {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .el-table .cell {
    display: flex;
  }
}
</style>